// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.meego 1.0
import "../js/core.js" as Core
import "../delegates"
import "../parts"

Page {
    property int karmaId
    property string currentTitle
    property string currentPoints

    id: listpanel
    tools: listTools

    ListModel {
        id: itemModel
    }

    Rectangle{
        anchors.fill: parent
        color: "#e1ecef"

    }

    Flickable{
        id: flicklist
        width: parent.width; height: parent.height-titlebar.height
        contentWidth: parent.width;
        //contentHeight: height+100
        anchors.top: titlebar.bottom
        anchors.right: parent.right



        ListView {
            id: view
            model: itemModel
            anchors.fill: parent
            clip:true
            delegate: KarmaItemDelegate {
                title: model.title
                points: model.points
                onClicked: {
                    karmaId=model.id
                    currentTitle=model.title
                    currentPoints=model.points
                    contexMenu.open();
                }
            }
        }
    }
    //Page layout is divided in 3
    TitleBar{ id:titlebar }

    // TodoCreateDialog to add new todo to the current box
    AddKarmaForm {
        id: karmaCreateDialog

        onStatusChanged: {
            if(status == DialogStatus.Opening)
                if (karmaId==0) {
                    title = "";
                    points = 0;
                }
                else {
                    title= currentTitle
                    points=currentPoints
                }
        }

        onAccepted: {
            if (karmaId==0){
                var item = Core.defaultItem();
                item.points = points;
                item.title = title;
                Core.createKarma(item);
                updateUi();
            }
            else{
                update();
                updateUi();
            }
        }
    }

    ToolBarLayout {
        id: listTools
        visible: false

        Rectangle{
            color:"#8f00FF"
            anchors.fill: parent
        }
        ToolIcon {
            iconId: "toolbar-back";
             anchors.left:parent.left
            onClicked: { pageStack.pop();}}
        ToolIcon {
            platformIconId: "toolbar-add"
            //anchors.right: (parent === undefined) ? undefined : parent.right
            onClicked: {karmaId=0;karmaCreateDialog.open()}
        }
    }

    ContextMenu {
        id: contexMenu
        MenuLayout {
            MenuItem {
                text: "Delete item"
                onClicked:{ deleteItem(karmaId)}
            }
            MenuItem {
                text: "Edit item"
                onClicked:{karmaCreateDialog.open() }
            }
        }

    }

    onStatusChanged: {
        if(status == PageStatus.Activating) {
            updateUi();
        }
    }

    function updateUi() {
        view.model = 0;
        Core.readKarmaList(itemModel);
        view.model = itemModel;
    }

    function deleteItem(id){
        Core.deleteKarma(id);
        updateUi();
    }

    function update()
    {
        // read the TodoItem with the provided karmaId
        var item = Core.readKarmaItem(karmaId);
        // get values from UI fields
        item.title = karmaCreateDialog.title;
        item.points = karmaCreateDialog.points;
        // new Data() will return the current date
        item.modified = new Date();
        // update the todoItem in Database
        Core.updateKarma(item);
    }

}
